
<template>
    <van-search
        v-model="keywords"
        placeholder="请输入搜索关键词"
        @search="Search"
    />
    <div class="coupon_list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div class="coupon_item" v-for="(item,key) in list" :key="key" >
                <div class="item_content" >
                    <router-link :to="{path:'/coupon/info',query:{cid:item.id}}">
                        <div class="left" id="rate">{{ item.rate*100 }}<span>折</span></div>
                        <div class="right">
                            <div>{{ item.title }}</div>
                            <div>订单满<span>100元</span>打<span>{{item.rate*100}}折</span></div>
                            <div>每人限领1张</div>
                            <div>{{ item.endtime_text }}</div>
                        </div>
                    </router-link>
                </div>
                <div class="item_btn">
                    <van-button  type="primary" class="right_btn" @click="CouponInfo(item.id)">领取</van-button>
                </div>
            </div>
            
        </van-list>
        </van-pull-refresh>
    </div>

  <Tabbar />
</template>

<script setup>
    const {proxy} = getCurrentInstance()
    //优惠卷列表
    let list = ref([])

    //用户优惠卷列表
    let lists = ref([])
    // 搜索关键词
    let keywords = ref('')
    //刷新状态
    let refreshing = ref(false)

    //加载状态
    let loading = ref(false)

    //是否无更多数据
    let finished = ref(false)

    //当前页
    let page = ref(1)

    const onRefresh = async () => {
        // console.log('下拉刷新')
        //重置当前页
        page.value = 1
        //重置列表数据
        list.value = []
        //重置加载状态
        loading.value = true
        //重置加载完成状态
        finished.value = false
        //重新获取数据
        onLoad()
    }
    // 列表数据
    const onLoad = async () => {
        //判断是否为加载中的状态
        if(refreshing.value)
        {
            refreshing.value = false
        }
        var params = {
            page:page.value,
            keywords:keywords.value
        }

        var result = await proxy.$POST({
            url:'coupon/lists',
            params,
        })

        // console.log(result)
        // return false

        loading.value = false
        //没有更多数据
        if(result.code == 0)
        {
            finished.value = true
            return false
        }

        // if(result.code == 0)
        // {
        //     proxy.$fail(result.msg)
        //     return false
        // }
        // // 没有更多数据
        // if(result.data.list.length == 0)
        // {
        //     finished.value = true
        //     return false
        // }

        // lists.value = result.data.lists
        list.value = list.value.concat(result.data.list)
        page.value++
        // console.log(lists.value)
        // return false

    }
    const Search = () => {
        // console.log('搜索')
        refreshing.value = true
        onRefresh()
    }

    // 跳转优惠详情
    const CouponInfo = (res) => {

        // console.log(res)
        // return false
        proxy.$router.push({
            path:'/coupon/info',query:{cid:res}
        })
    }
</script>

<style scoped>
  @import url('/assets/css/CouponIndex.css');
  #rate{
    display: flex;
    width: 2em;
    height: 2em;
    font-size: 2.5em;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:center;
    align-items:flex-end;
  }
</style>